<!-- 重难点分析 -->
<template>
  <div>
    <a-card>
      <title-name title="项目重难点分析" />
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :scroll="{ x: 1200 }"
        :pagination="false"
        ref="tableRef"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <!-- 项目重难点 -->
        <span
          slot="keyPoint"
          slot-scope="text, record, index"
        >
          <span v-if="queryInfo.pageType == 'detail'">{{ text }}</span>
          <EditableCell
            :required="true"
            v-else
            :key="index + '-keyPoint'"
            :text="text"
            @change="onCellChange(record, 'keyPoint', $event)"
            :maxLength="30000"
          ></EditableCell>
        </span>
        <!-- 原因分析 -->
        <span
          slot="reasonAnalysis"
          slot-scope="text, record, index"
        >
          <span v-if="queryInfo.pageType == 'detail'">{{ text }}</span>
          <EditableCell
            :required="true"
            v-else
            :key="index + '-reasonAnalysis'"
            :text="text"
            @change="onCellChange(record, 'reasonAnalysis', $event)"
            :maxLength="30000"
          ></EditableCell>
        </span>
        <!-- 解决措施 -->
        <span
          slot="solution"
          slot-scope="text, record, index"
        >
          <span v-if="queryInfo.pageType == 'detail'">{{ text }}</span>
          <EditableCell
            :required="true"
            v-else
            :key="index + '-solution'"
            :text="text"
            @change="onCellChange(record, 'solution', $event)"
            :maxLength="3000"
          ></EditableCell>
        </span>
        <!-- 备注 -->
        <span
          slot="remark"
          slot-scope="text, record, index"
        >
          <span v-if="queryInfo.pageType == 'detail'">{{ text }}</span>
          <EditableCell
            v-else
            :key="index + '-remark'"
            :text="text"
            @change="onCellChange(record, 'remark', $event)"
            :maxLength="30000"
          ></EditableCell>
        </span>
        <span
          slot="operation"
          slot-scope="text, record"
        >
          <template>
            <a-popconfirm
              title="请确认是否要删除？"
              @confirm="() => onDelete(record)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </template>
        </span>
      </a-table>
      <a-button
        class="mt20"
        type="primary"
        @click="addRow"
        v-if="queryInfo.pageType !== 'detail'"
      > 增行 </a-button>
    </a-card>
  </div>
</template>

<script>
import { getPlanKeyDifficultVOList, updateByPrimaryKeySelectiveDifficult } from '@/api/projectManagementPlanning/projectPlanningTaskList'
import EditableCell from '../../projectPlanningTaskList/detail/components/EditableCell'
const DEFAULT_ROW = [
  {
    keyPoint: '',
    reasonAnalysis: '',
    solution: '',
    remark: '',
    guid: new Date().getTime()
  }
]
const REQUEST_KEYS = ['keyPoint', 'reasonAnalysis', 'solution']
export default {
  name: 'AnalysisPoints',
  data() {
    return {
      columns: [
        {
          title: '序号',
          width: 65,
          align: 'center',
          dataIndex: 'serial',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '项目重难点',
          width: 300,
          align: 'center',
          dataIndex: 'keyPoint',
          scopedSlots: { customRender: 'keyPoint' }
        },
        {
          title: '原因分析',
          align: 'center',
          width: 300,
          dataIndex: 'reasonAnalysis',
          scopedSlots: { customRender: 'reasonAnalysis' }
        },
        {
          title: '解决措施',
          align: 'center',
          dataIndex: 'solution',
          scopedSlots: { customRender: 'solution' }
        },
        {
          title: '备注',
          width: 300,
          align: 'center',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remark' }
        }
        // {
        //   title: '操作',
        //   align: 'center',
        //   fixed: 'right',
        //   width: 100,
        //   dataIndex: 'operation',
        //   scopedSlots: { customRender: 'operation' }
        // }
      ],
      data: [],
      queryInfo: {
        id: '',
        pageType: ''
      }
    }
  },

  props: {
    spinning: Boolean,
    baseFormInfo: {
      type: Object,
      default: () => {}
    }
  },

  components: { EditableCell },

  computed: {},

  created() {
    const { id, pageType, version = '' } = this.$route.query
    /**
     * version 不存在 就是正常入口进来的。
     * 否则 就是在V1等弹窗进来的
     */
    this.queryInfo.id = id
    this.queryInfo.pageType = pageType
    this.queryInfo.version = version
    if (this.queryInfo.pageType !== 'detail') {
      const opera = {
        title: '操作',
        align: 'center',
        fixed: 'right',
        width: 100,
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' }
      }
      this.columns.push(opera)
    }
    this.getPlanKeyDifficultVOList()
  },

  mounted() {},

  methods: {
    // 提交
    AnalysisPointsSubmit(formBase) {
      let flag = true // 是否全部填写
      this.data.map((v) => {
        REQUEST_KEYS.map((k) => {
          if (v[k] == '' || v[k] == null || v[k] == undefined || (v[k] + '').replace(/\s*/g, '') == '') {
            flag = false
          }
        })
      })
      if (this.data.length === 0) {
        this.$warning({
          title: '提示',
          content: '请至少填写一行数据',
          okText: '确定'
        })
        return
      }
      if (!flag) {
        this.$warning({
          title: '提示',
          content: '请将数据填写完整',
          okText: '确定'
        })
        return
      } else {
        this.$confirm({
          title: '提交',
          content: '请确认是否要提交？',
          onOk: async () => {
            this.$emit('update:spinning', true)
            const query = {
              list: JSON.parse(JSON.stringify(this.data)),
              changed: this.queryInfo.pageType === 'change' ? true : false,
              planTaskDetailId: this.queryInfo.id,
              statusEnum: 'SUBMITTED',
              version: this.queryInfo.version
            }
            updateByPrimaryKeySelectiveDifficult(query)
              .then((res) => {
                this.$emit('update:spinning', false)
                this.$message.success('提交成功')
                this.$close()
              })
              .catch(() => {
                this.$emit('update:spinning', false)
              })
          }
        })
      }
    },
    // 草稿
    AnalysisPointsSaveDrafts(formBase) {
      this.$emit('update:spinning', true)
      const query = {
        list: JSON.parse(JSON.stringify(this.data)),
        changed: this.queryInfo.pageType === 'change' ? true : false,
        planTaskDetailId: this.queryInfo.id,
        statusEnum: 'DRAFT',
        version: this.queryInfo.version
      }
      updateByPrimaryKeySelectiveDifficult(query)
        .then((res) => {
          this.$emit('update:spinning', false)
          this.$message.success('保存成功')
        })
        .catch(() => {
          this.$emit('update:spinning', false)
        })
    },
    // 增行
    addRow() {
      this.data.push({ ...DEFAULT_ROW[0], guid: this.getGuid() })
      console.log(DEFAULT_ROW, this.data)
    },
    getGuid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (Math.random() * 16) | 0
        var v = c === 'x' ? r : (r & 0x3) | 0x8
        return v.toString(16)
      })
    },
    // 获取详情
    getPlanKeyDifficultVOList() {
      this.$emit('update:spinning', true)
      const query = {
        planTaskDetailId: this.queryInfo.id,
        latestData: true
      }
      if (this.queryInfo.version) {
        query.latestData = false
        query.version = this.queryInfo.version
      }
      getPlanKeyDifficultVOList(query)
        .then((res) => {
          if (res.data && res.data.length) {
            res.data.map((v) => (v.guid = this.getGuid()))
            this.data = res.data
          } else {
            this.data = this.$clone(DEFAULT_ROW)
          }
          this.$emit('update:spinning', false)
        })
        .catch(() => {
          this.$emit('update:spinning', false)
        })
    },
    // 更新item
    onCellChange(item, dataIndex, value) {
      this.data.map((v) => {
        if (v.guid === item.guid) {
          v[dataIndex] = value
        }
      })
    },
    // 删除item
    onDelete(item) {
      let arr = JSON.parse(JSON.stringify(this.data))
      arr = arr
        .map((v) => {
          if (v.guid !== item.guid) {
            return v
          }
        })
        .filter((v) => v && v.guid)
      this.data = arr
    }
  }
}
</script>
<style lang='less' scoped>
</style>